<template> 
    <div class="app-container">
       <el-row>
           <el-col :span="24" style="margin-bottom:25px;">
                 <el-select width="100px" v-model="param.shop"  @change="loadBarChart" placeholder="请选择门店">
                    <el-option
                    v-for="item in shops"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <el-date-picker  style="margin-left:15px" width="100px"
                    v-model="param.time"
                     value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker> 
           </el-col>
       </el-row> 
       <el-row :gutter="20" style="margin-bottom:25px;">
            <el-col :span="8">
                <div class="total-frame frame-c1">
                    <div class="total-title">会员总数量</div>
                    <div class="total-value"><span>{{members}}</span><em  class="total-unit">位</em></div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="total-frame frame-c2"> 
                    <div class="total-title">平均消费</div>
                    <div class="total-value"><span>{{avgAmounts}}</span><em  class="total-unit">元</em></div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="total-frame frame-c3">
                    <div class="total-title">总消费</div>
                    <div class="total-value"><span>{{amounts}}</span><em  class="total-unit">元</em></div>
                </div>
            </el-col>
        </el-row>
       <el-row>
           <el-col :span="24">
              <div :id="barChartId" class="total-frame" style="min-height:350px;"></div>
           </el-col>
       </el-row> 
    </div>
</template> 
<script>
    //将$都替换为$
    import {getRealPriceByProduct,getRealPrice} from '@/api/prm/pmsSkuOut'
    import {getUmsMemberCount} from '@/api/ums/member'
    import echarts from 'echarts'
    import echartsTheme from "@/components/echarts/theme/westeros.json";

    export default {
        name: 'shopExpense', 
        data() {
            return {
                shops: [
                ],
               param:{
                    //0今天1昨天2最近7天 3本月
                    shop:null,
                    //0热销
                    time:null
               },
               barChartId:"barChart",
               members:0,
               amounts:0,
               avgAmounts:0,
               barChart:null,
               barChartOption : {
                     tooltip : {
                        trigger: 'axis'
                    },
                    legend: {//图例
                        data: ['商品销量']
                    },
                    xAxis: {//x轴
                        type: 'category',
                        data: [],//x轴的数据
                        splitLine: {show: false},
                        name:"商品"
                    },
                    backgroundColor: '#fff',//图得背景色
                    yAxis: {
                        name: '销量',//轴的名字，默认位置在y轴上方显示
                        type: 'value'
                    },
                    series: [{
                        name: '商品销量',//每组数据的名字，与图例对应
                        data: [],//数据
                        type: 'bar',//柱状图
                        itemStyle: {
                            normal: {
                                color: '#FD6B71',//设置柱子颜色
                                label: {
                                    show: true,//柱子上显示值
                                    position: 'top',
                                    textStyle: {
                                        color: '#606266'//值得颜色
                                    }
                                }
                            }
                        },
                        barWidth: 25//设置柱子宽度，单位为px
                    }]
                }
               
            }
        },
        created() {
            //this.initChart();
            this.loadBarChart();
            this.getMinfo();
        },
        filters: {
            formatCreateTime(time) {
                let date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
            }
        },
        beforeDestroy() {
			
			if (this.barChart) {
                this.barChart.dispose();
                this.barChart = null;
			}
        },
        methods: {
            getUmsMember(){
                const r1 = new Promise((resolve, reject) => {
                    getUmsMemberCount().then(response => {
                         if(response.code&&response.code==200){
                            resolve(response)
                         }else{
                            reject(response)
                         }
                         
                    })
                 })
                 return r1;
            },
            getRealPrices(){
                const r2 = new Promise((resolve, reject) => {
                    getRealPrice().then(response => {
                         if(response.code&&response.code==200){
                            resolve(response)
                         }else{
                            reject(response)
                         }
                         
                    })
                 })
                 return r2;
            },
            async getMinfo(){
                const x = await this.getUmsMember()
                const y = await this.getRealPrices()
                this.members = x.data
                this.amounts = y.data.amount
                if(this.members!=0&&this.amounts!=0){
                    this.avgAmounts = (this.amounts/this.members).toFixed(2)
                }
            },
            initChart(){
                 this.$nextTick(() => {
                    echarts.registerTheme('westeros', echartsTheme)
                    this.barChartId = echarts.init(document.getElementById(this.barChartId),'westeros');
                   // var option = ;

                   // this.barChartId.setOption(option);
                })
            },
            loadBarChart(){
               if (this.barChart) {
                    this.barChart.dispose();
                    this.barChart = null;
                }
                getRealPriceByProduct(this.param).then(response => {
                    let result = response.data;
                    if(result){
                        let xAxis = [];
                        let series = []
                        for(let item of result){
                            xAxis.push(item.proName)
                            series.push(item.realPrice)
                        }
                        this.$nextTick(() => {
                            echarts.registerTheme('westeros', echartsTheme)
                            this.barChart = echarts.init(document.getElementById(this.barChartId),'westeros');
                            this.barChartOption.xAxis.data =  xAxis
                            this.barChartOption.series[0].data = series
                            this.barChart.setOption(this.barChartOption)
                        })
                    }
                
                });
            }
           
            
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .app-container {
        padding: 25px;
    }
    .total-frame {
        border: 1px solid #DCDFE6;
        padding: 20px;
        height: 100px;
        border-radius: 5px;
    }
    .frame-c1{
        font-weight: 600;
        line-height: 2;
    }
    .frame-c2{
        font-weight: 600;
        line-height: 2;
    }
    .frame-c3{
        font-weight: 600;
        line-height: 2;
    }
     .total-title {
        font-size: 13px;
    }

    .total-value {
        font-size: 18px;
        font-weight: normal;
        color:  rgb(252, 102, 87);
    }
    .total-unit{
        font-style: normal;
        font-size: 12px;
        padding: 0 5px;
    }
</style>


